<script setup>

import { ref,onMounted, reactive } from 'vue'
import { Delete, Edit, Search, Share, Upload,Plus } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const value = ref(true)
const tableData= ref([])
const isConfirm = ref(false)
const isDialog = ref(false)
const title = ref('')
let dt = reactive({})


//渲染
const show = async ()=>{
  let res = await axios({
    url:"http://localhost:8080/depts"
  })
  tableData.value=res.data
  console.log(tableData);
  
}
//状态开关
const changeSwitch = async (dept) =>{
  let res = await axios({
    url:"http://localhost:8080/depts",
    method:'put',
    data:dept 
  })
  ElMessage({
    message: '成功',
    type: 'success',
    plain: true,
  })
}

//新增和修改
const save_update = (deptMange)=>{

 isDialog.value = true
 if(deptMange.id) for(let key in deptMange) dt[key] = deptMange[key]
    
    if(deptMange.id){
      // 修改
      title.value = '修改'
    }else{
      for(let key in dt) dt[key] = null
      dt.parentId=deptMange
      // 新增
      title.value = '添加'
      console.log(dt);
    }
}
const save_update_confirm = async ()=>{
    if(dt.id){
      let res = await axios({
        url:'http://localhost:8080/depts',
        method:'put',
        data:dt
      })
    }else{
      
      console.log(dt);
      
      let res = await axios({
        url:'http://localhost:8080/depts',
        method:'post',
        data:dt
      })
      
      
    }
    isDialog.value = false
    show()
  }



//删除
const del = async (id)=>{
    isConfirm.value = true
    dt.id = id
  }
  const delConfirm = async ()=>{
    let res = await axios({
      url:`http://localhost:8080/depts/${dt.id}`,
      method:'delete'
    })
    isConfirm.value = false
    if(res.data.flag){
      show()
    }
    dt.id = ''
  }

onMounted(()=>{
  show()
})


</script>

<template>


<el-scrollbar>
    <div class="scrollbar-flex-content">
      <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" default-expand-all>
      <el-table-column  prop="name" label="名称" width="300px" />
    <el-table-column prop="leader" label="部门负责人" width="180" />
    <el-table-column prop="phone" label="部门电话" />
    <el-table-column prop="status" label="状态" v-slot="scope">
      <el-switch  v-model="scope.row.status" :active-value="1" :inactive-value="0" @click="changeSwitch(scope.row)"></el-switch>
    </el-table-column>
    <el-table-column prop="time" label="创建时间" />
    <el-table-column label="操作" width="250" fixed="right" v-slot="scoped">
      <el-button type="success" :icon="Plus" @click="save_update(scoped.row.id)"/>
      <el-button type="primary" :icon="Edit" @click="save_update(scoped.row)" />
      <el-button type="danger" :icon="Delete" @click="del(scoped.row.id)"/>
    </el-table-column>
    </el-table>
    </div>
  </el-scrollbar>



<!-- 添加和修改弹窗 -->
<el-dialog v-model="isDialog" :title="title" width="500">
      <el-form-item label="部门名称" :label-width="100">
        <el-input v-model="dt.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="部门负责人" :label-width="100">
        <el-input v-model="dt.leader"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="部门电话" :label-width="100">
        <el-input v-model="dt.phone"  autocomplete="off" />
      </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isDialog = false">取消</el-button>
        <el-button type="primary" @click="save_update_confirm">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

<!-- 删除 -->
<el-dialog
    v-model="isConfirm"
    title="温馨提示"
    width="500"
  >
    <span>确定要删除吗?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isConfirm = false">取消</el-button>
        <el-button type="primary" @click="delConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>





  <!-- <div >
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column  prop="name" label="名称" width="660" >
      <el-icon><ArrowRight /></el-icon>
      <default prop ="name">{{  }}</default>
    </el-table-column>
    <el-table-column prop="bmfzr" label="部门负责人" width="180" />
    <el-table-column prop="phone" label="部门电话" />
    <el-table-column prop="state" label="状态" >
      <el-switch v-model="value" />
    </el-table-column>
    <el-table-column prop="date" label="创建时间" />
    <el-table-column prop="address" label="操作" width="250">
      <el-button type="primary" :icon="Plus" />
      <el-button type="primary" :icon="EditPen" />
      <el-button type="primary" :icon="Delete" color="#FFB6C1" />
    </el-table-column>
  </el-table>
  </div> -->

</template>





<style scoped>
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>